<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()"
     bsModal #loginModal="bs-modal" class="modal fade login-modal-view wf-login-modal" tabindex="-1" role="dialog"
     aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-body">
        <!--login-->
        <div *ngIf="modalContent=='login'">
          <!--login-title-->
          <div class="wf-modal-title">
            <div class="wf-watermark">LOGIN</div>
            <div class="text">登录</div>
          </div>

          <!--login-tab-->
          <div class="login-tab-box login-form">
            <div class="login-tab fl" (click)="showPsdLogin()" >
              <a href="javascript:;" [ngClass]="{active: isPsdLogin==true}">密码登录</a>
            </div>
            <div class="login-tab fl" (click)="showVerCodeLogin()">
              <a href="javascript:;" [ngClass]="{active: isVerCodeLogin==true}">验证码登录</a>
            </div>
          </div>
          <!--psd-login-form-->
          <form class="login-form form-horizontal"
                [formGroup]="loginForm"
                *ngIf="isPsdLogin==true">
            <div class="form-group">
              <input type="text" class="username form-control"
                     formControlName="username" placeholder="请输入手机号" autocomplete="off">
              <div [hidden]="loginForm.get('username').valid || loginForm.get('username').untouched">
                <div class="wf-form-error" [hidden]="!loginForm.hasError('mobile','username')">
                  请输入正确的手机号
                </div>
              </div>
            </div>
            <div class="form-group">
              <input type="password" class="password form-control"
                     formControlName="password" placeholder="请输入密码" autocomplete="off">
              <div [hidden]="loginForm.get('password').valid || loginForm.get('password').untouched">
                <div class="wf-form-error" [hidden]="!loginForm.hasError('password','password')">
                  密码为6-16位字母或数字
                </div>
              </div>
            </div>
          </form>
          <!--verify Code login form-->
          <form class="login-form form-horizontal"
                [formGroup]="verloginForm"
                *ngIf="isVerCodeLogin==true">
            <div class="form-group">
              <input type="text" class="username form-control"
                     formControlName="username" placeholder="请输入手机号">
              <div [hidden]="verloginForm.get('username').valid || verloginForm.get('username').untouched">
                <div class="wf-form-error" [hidden]="!verloginForm.hasError('mobile','username')">
                  请输入正确的手机号
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-7" style="padding-left: 0">
                <input class="form-control verify" formControlName="verifyCode"
                       placeholder="请输入验证码">
              </div>
              <div class="col-sm-5" style="padding-right: 0">
                <button class="bg-green form-control" (click)="doLoginVerify()"
                        [disabled]="verloginForm.hasError('mobile','username')||disabled"
                        style="height: 50px;">{{getVerTitle}}</button>
              </div>
            </div>
          </form>
          <div class="login-form form-horizontal">
            <div class="form-group">
              <div class="login-free" *ngIf="isPsdLogin==true">
              <!--<span>-->
                <!--<input type="checkbox" name="saveCookie" [(ngModel)]="saveCookie">-->
                <!--<span (click)="switchSaveCookie()">一周内免登录</span>-->
              <!--</span>-->
              </div>
              <div class="form-group" style="margin-bottom: 30px" >
                <button class="login-btn form-control bg-green" *ngIf="isPsdLogin==true"
                        [disabled]="!loginForm.valid" (click)="doLogin()">登录</button>
                <button class="login-btn form-control bg-green" *ngIf="isPsdLogin!=true"
                        [disabled]="!verloginForm.valid" (click)="doVerLogin()">登录</button>
              </div>
            </div>
          </div>



          <!--register input-->
          <div class="register-div">
            没有帐号？现在就<span class="cur-pointer sys-green" (click)="switchContent('register')">注册</span>
          </div>
          <!--<div class="cut-off-div">-->
            <!--<div class="text-grey word">其他登录方式</div>-->
          <!--</div>-->
          <!--<div class="other-way-div">-->
            <!--<img src="assets/images/login/wechat.png">-->
          <!--</div>-->
        </div>

        <!--register-->
        <div *ngIf="modalContent=='register'">
          <div class="wf-modal-title">
            <div class="wf-watermark">REGISTER</div>
            <div class="text">注册</div>
          </div>
          <form class="login-form form-horizontal" [formGroup]="registerForm">
            <div class="form-group">
              <input class="username form-control" formControlName="username"
                     placeholder="请输入手机号">
              <div [hidden]="registerForm.get('username').valid || registerForm.get('username').untouched">
                <div class="wf-form-error" [hidden]="!registerForm.hasError('mobile','username')">
                  请输入正确的手机号
                </div>
              </div>
            </div>

            <div class="form-group text-grey">
              <div class="col-sm-7" style="padding-left: 0">
                <input class="form-control verify" formControlName="verifyCode"
                       placeholder="请输入验证码">
              </div>
              <div class="col-sm-5" style="padding-right: 0">
                <button class="bg-green form-control" (click)="doVerify()"
                        [disabled]="registerForm.hasError('mobile','username')||disabled"
                        style="height: 50px;">{{getVerTitle}}</button>
              </div>
            </div>
            <div class="form-group">
              <input type="password" class="password form-control"
                     placeholder="请输入密码" formControlName="password">
            </div>
            <div class="form-group">
              <input type="password" class="password form-control"  placeholder="请确认密码"
                     formControlName="pwdCheck">
            </div>
            <div class="form-group text-grey" style="font-size: 12px;line-height: 100%;height: 15px">
              <span class="fl">
                <input type="checkbox" style="margin-right: 8px;">我已阅读并同意
                <span class="sys-green cur-pointer" (click)="showProtocolModal()">《青果寓用户协议》</span>
              </span>
            </div>
            <div class="form-group">
              <button class="login-btn form-control bg-green" (click)="doRegister()"
                      [disabled]="!registerForm.valid">
                注册
              </button>
            </div>
          </form>
          <div class="register-div">
            已有帐号？现在就<span class="cur-pointer sys-green" (click)="switchContent('login')">登录</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
<app-qgy-protocol-modal (modalClose)="modalClose"></app-qgy-protocol-modal>
